<template>
  <el-dialog title="添加渠道" :visible.sync="switchVisible" >
    <div class="form-list">
      <label class="label-txt">渠道名称：</label>
      <el-input v-model="form.name" class="w200"></el-input>
    </div>
    <div class="form-list">
      <label class="label-txt">渠道代码：</label>
      <el-input v-model="form.code" class="w200" :disabled="isDisabled"></el-input>
    </div>
    <div class="form-list" v-if="form.code == 'dianping'">
      <label class="label-txt m-absolute">业务模式：</label>
      <el-radio-group v-model="form.pay_type" class="m-inline pl74">
        <el-radio label="在线预订" :disabled="form.pay_type == '团购券'">在线预订</el-radio>
        <el-radio label="团购券" :disabled="form.pay_type == '在线预订'">团购券</el-radio>
      </el-radio-group>
    </div>
    <div class="form-list">
      <label for="" class="label-txt">是否启用：</label>
      <el-radio v-model="form.is_show" label="t">是</el-radio>
      <el-radio v-model="form.is_show" label="f">否</el-radio>
    </div>
    <div class="form-list">
      <label class="label-txt">收佣费率：</label>
      <el-radio v-model="form.commission_mode" label="none">无</el-radio>
      <el-radio v-model="form.commission_mode" label="unified">统一</el-radio>
      <el-radio v-model="form.commission_mode" label="ladder">阶梯</el-radio>

    </div>
    <div class="form-list"  v-if="form.commission_mode == 'unified'">
      <label class="label-txt">费率：</label>
      <el-input v-model="rateText" class="w100 ml20"></el-input>%
    </div>
    <div class="form-list" v-if="form.commission_mode == 'ladder'">
      <label class="label-txt m-absolute">阶梯规则：</label>
      <div v-for="(item,ind) in rateFormula"  :class="[rateFormula.length-1 != ind ?'mb10':'','m-inline pl74']">
        <el-input v-model="item.ge" class="w100 "></el-input>&nbsp;&nbsp;≤&nbsp;&nbsp;x&nbsp;&nbsp;≤&nbsp;&nbsp;<el-input v-model="item.lt" class="w100 "></el-input>
        <label class="label-txt">费率：</label>
        <el-input v-model="item.rate" class="w100 ml20"></el-input>%
        <el-button type="danger" size="mini" class="form-button" plain @click="del(ind)" v-if="rateFormula.length-1 != ind ">删除</el-button>
      </div>
      <el-button type="danger" size="mini" class="form-button" plain @click="add">新增</el-button>
    </div>
    <div class="form-list">
      <label class="label-txt">结算账期：</label>
      <el-radio v-model="form.settlement_mode" label="day">日结</el-radio>
      <el-radio v-model="form.settlement_mode" label="week">周结</el-radio>
      <el-radio v-model="form.settlement_mode" label="month">月结</el-radio>
    </div>
    <div class="dialog-footer">
      <el-button class="button-certain" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
      name: "addChannel",
      props:['parcel'],
      data(){
        return{
          switchVisible:false,
          aaa:false,
          // defaultPayType:['在线预订','团购券'],
          // payType:[],
          rateText:'',
          rateFormula:[],
          isDisabled:false,
          defaultRateFormula:{
            ge: '',
            lt: '',
            rate: ''
          },
          defaultForm:{
            id: '',
            name: '',
            code: '',
            commission_mode: '',
            is_show: '',
            pay_type: '',
            settlement_mode: '',
            is_del:0
          },
          form:{
          }
        }
      },
      methods:{
        openDialog(parcel){
          this.switchVisible = true;
          // this.defaultForm = this.form;
          if(parcel){
            this.form = {...{},...this.defaultForm,...parcel};

            if(parcel.rate instanceof Array){
              this.rateFormula = parcel.rate;
            }else if(typeof parcel.rate == 'number'){
              this.rateText = parcel.rate;
            }
            this.isDisabled = true;
          }else{
            this.form = {...{},...this.defaultForm};
            this.rateFormula.push(this.defaultRateFormula);
            this.isDisabled = false;
            this.rateText = '';
          }
        },
        submit(){
          // 收佣费率
          if(this.form.commission_mode == 'unified'){
            this.form.rate = this.rateText;
          }else if(this.form.commission_mode == 'ladder'){
            this.form.rate = this.rateFormula;
          }
          // 业务模式
          // if(this.form.code != 'dianping'){
          //   this.payType = [];
          // }
          // if(this.payType.length){
          //   const arr = [],self =this;
          //   this.payType.forEach((item)=>{
          //     self.form.pay_type = item;
          //     arr.push(self.form);
          //   })
          //   this.switchVisible = false;
          //   console.log(arr);
          //   this.$emit('upload',arr);
          //   return;
          // }
          this.switchVisible = false;
          this.$emit('upload',this.form);
        },
        del(ind){
          this.rateFormula.splice(ind,1);
        },
        add(){
          this.rateFormula.push(this.defaultRateFormula);
        }

      }
    }
</script>

<style scoped lang="scss">


  .el-radio__input.is-checked .el-radio__inner {
    border-color: #FF679E;
    background: #FF679E;
  }
  .el-radio__input.is-checked+.el-radio__label {
    color: #FF679E;
  }
  .w100 {
    width: 100px;
  }
  .w200{
    width: 200px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .pl74{
    padding-left:74px;
  }
  .mb10{
    margin-bottom:10px;
  }
  .el-input__inner {
    height: 25px;
  }
  .m-inline{
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width:100%;
  }
  .m-absolute{
    position: absolute;
  }
  .form-list{
    margin-bottom:10px;
    line-height: 40px;
    position: relative;
  }
  .button-certain {
    background: #FF679E;
    border-radius: 101px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    padding: 10px 30px;
  }
  .dialog-footer{
    text-align: center;
  }
  .form-button{
    position: absolute;
    right: 0;
    bottom: 5px;
    border: 1px solid #FF679E;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    color: #FF679E;
  }
</style>
